<!-- 最受期待 -->
<template>
  <div v-if="dataList">
    <!-- 标题-->
    <sn-row-has-two-col :left="15" :right="9">
      <sn-text
          :font-size="25"
          font-color="#FFB400"
          class="margin-bottom-20"
          slot="one-col"
          text="最受期待"/>
      <el-link slot="two-col"
               :underline="false">
        <sn-text
            :move-down="7"
            :move-right="55"
            :font-size="15"
            font-color="#FFB400"
            text="查看完整榜单 >"/>
      </el-link>
    </sn-row-has-two-col>
    <!-- 想看数第一 -->
    <sn-row-has-four-col :one="10" :two="14" :gutter="0">
      <div slot="one-col">
        <el-image
            :src="dataList[0].poster"
            @click="getIntroduce(dataList[0].movieId)"
            class="first-image"/>
        <i class="ranking-top-icon"/>
      </div>
      <div slot="two-col" class="box-office-first">
        <!-- 电影名 -->
        <el-link
            :underline="false"
            @click="getIntroduce(dataList[0].movieId)">
          <sn-text
              :font-size="19"
              :move-down="10"
              class="margin-bottom"
              :text="dataList[0].movieName"/>
        </el-link>
        <!-- 上映时间-->
        <div class="to-flex margin-top-20">
          <sn-text
              font-color="#999"
              class="margin-right"
              text="上映时间 :"/>
          <sn-text
              font-color="#999"
              class="margin-right"
              :text="String(dataList[0].showDate).split(' ')[0]"/>
        </div>
        <!-- 想看数-->
        <div class="to-flex">
          <sn-text
              :move-down="10"
              :text="dataList[0].expect"
              font-color="#FFB400"/>
          <sn-text
              :move-down="10"
              text="人想看"
              font-color="#FFB400"/>
        </div>
      </div>
    </sn-row-has-four-col>
    <!--    想看数第二 第三-->
    <sn-row-has-two-col :left="12" :right="12">
      <div slot="one-col">
        <div>
          <sn-text text="2" class="ranking-index"/>

          <el-image
              @click="getIntroduce(dataList[1].movieId)"
              :src="dataList[1].poster"
              class="indexImage"/>
        </div>
        <div class="description">
          <el-link @click="getIntroduce(dataList[1].movieId)"
                   :underline="false">
            <sn-text
                :text="dataList[1].movieName"
                :font-size="18"
                class="margin-bottom margin-left"/>
          </el-link>
          <div class="to-flex">
            <sn-text
                :text="dataList[1].expect"
                class="margin-left"
                font-color="#FFB400"/>
            <sn-text
                text="人想看"
                font-color="#FFB400"/>
          </div>
        </div>
      </div>
      <div slot="two-col" class="third">
        <div>
          <sn-text text="3" class="ranking-index"/>
          <el-image
              @click="getIntroduce(dataList[2].movieId)"
              :src="dataList[2].poster"
              class="indexImage"/>
        </div>
        <div class="description">
          <el-link @click="getIntroduce(dataList[2].movieId)"
                   :underline="false">
            <sn-text
                :text="dataList[2].movieName"
                :font-size="18"
                class="margin-bottom margin-left"/>
          </el-link>
          <div class="to-flex">
            <sn-text
                class="margin-left"
                :text="dataList[2].expect"
                font-color="#FFB400"/>
            <sn-text
                text="人想看"
                font-color="#FFB400"/>
          </div>
        </div>
      </div>
    </sn-row-has-two-col>
    <!--    分隔线-->
    <div class="divider"></div>
    <!--    第四-->
    <sn-row-has-four-col :one="2" :two="12" :three="10">
      <sn-text
          text="4"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <el-link
          slot="two-col"
          @click="getIntroduce(dataList[3].movieId)"
          :underline="false">
        <sn-text
            @click="getIntroduce(dataList[3].movieId)"
            :font-size="19"
            :text="dataList[3].movieName"/>
      </el-link>
      <div slot="three-col" class="to-flex">
        <sn-text :text="dataList[3].expect" font-color="#FFB400" class="float-right" :move-right="85"/>
        <sn-text text="人想看" font-color="#FFB400" class="float-right" :move-right="85"/>
      </div>
    </sn-row-has-four-col>
    <sn-row-has-four-col :one="2" :two="12" :three="10">
      <sn-text
          text="5"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <el-link slot="two-col"
               @click="getIntroduce(dataList[4].movieId)"
               :underline="false">
        <sn-text
            :font-size="19"
            :text="dataList[4].movieName"/>
      </el-link>
      <div slot="three-col" class="to-flex">
        <sn-text :text="dataList[4].expect" font-color="#FFB400" class="float-right" :move-right="85"/>
        <sn-text text="人想看" font-color="#FFB400" class="float-right" :move-right="85"/>
      </div>
    </sn-row-has-four-col>
    <sn-row-has-four-col :one="2" :two="12" :three="10">
      <sn-text
          text="6"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <el-link slot="two-col"
               @click="getIntroduce(dataList[5].movieId)"
               :underline="false">
        <sn-text
            :font-size="19"
            :text="dataList[5].movieName"/>
      </el-link>
      <div slot="three-col" class="to-flex">
        <sn-text :text="dataList[5].expect" font-color="#FFB400" class="float-right" :move-right="85"/>
        <sn-text text="人想看" font-color="#FFB400" class="float-right" :move-right="85"/>
      </div>
    </sn-row-has-four-col>
    <sn-row-has-four-col :one="2" :two="12" :three="10">
      <sn-text
          text="7"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <el-link slot="two-col"
               @click="getIntroduce(dataList[6].movieId)"
               :underline="false">
        <sn-text
            :font-size="19"
            :text="dataList[6].movieName"/>
      </el-link>
      <div slot="three-col" class="to-flex">
        <sn-text :text="dataList[6].expect" font-color="#FFB400" class="float-right" :move-right="85"/>
        <sn-text text="人想看" font-color="#FFB400" class="float-right" :move-right="85"/>
      </div>
    </sn-row-has-four-col>
    <sn-row-has-four-col :one="2" :two="12" :three="10">
      <sn-text
          text="8"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <el-link slot="two-col"
               @click="getIntroduce(dataList[7].movieId)"
               :underline="false">
        <sn-text
            :font-size="19"
            :text="dataList[7].movieName"/>
      </el-link>
      <div slot="three-col" class="to-flex">
        <sn-text :text="dataList[7].expect" font-color="#FFB400" class="float-right" :move-right="85"/>
        <sn-text text="人想看" font-color="#FFB400" class="float-right" :move-right="85"/>
      </div>
    </sn-row-has-four-col>
    <sn-row-has-four-col :one="2" :two="12" :three="10">
      <sn-text
          text="9"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <el-link slot="two-col"
               @click="getIntroduce(dataList[8].movieId)"
               :underline="false">
        <sn-text
            :font-size="19"
            :text="dataList[8].movieName"/>
      </el-link>
      <div slot="three-col" class="to-flex">
        <sn-text :text="dataList[8].expect" font-color="#FFB400" class="float-right" :move-right="85"/>
        <sn-text text="人想看" font-color="#FFB400" class="float-right" :move-right="85"/>
      </div>
    </sn-row-has-four-col>
    <sn-row-has-four-col :one="2" :two="12" :three="10">
      <sn-text
          text="10"
          :font-size="20"
          slot="one-col"
          class="ranking"/>
      <el-link slot="two-col"
               @click="getIntroduce(dataList[9].movieId)"
               :underline="false">
        <sn-text
            :font-size="19"
            :text="dataList[9].movieName"/>
      </el-link>
      <div slot="three-col" class="to-flex">
        <sn-text :text="dataList[9].expect" font-color="#FFB400" class="float-right" :move-right="85"/>
        <sn-text text="人想看" font-color="#FFB400" class="float-right" :move-right="85"/>
      </div>
    </sn-row-has-four-col>
  </div>
</template>

<script>
export default {
  name: "TodayBoxOffice",
  data() {
    return {
      dataList: '',
    }
  },
  methods: {
    //最受期待榜
    getTheMostExpect() {
      this.$http({
        url: '/web/movie/index/getTheMostExpectedShow',
        method: 'get',
        params: this.$http.adornParams({
          'page': '1',
          'limit': '10',
        })
      }).then(({data}) => {
        this.dataList = data.data
      })
    },
    //到简介页面
    getIntroduce(id) {
      this.$store.commit(this.mutationsTypes.EXCHANGE_MOVIE_ID, id)
      this.$router.push({
        name: 'introduce',
      })
    },
  },
  created() {
    this.getTheMostExpect()
  }
}
</script>

<style scoped lang="less">
/*  排名 */
.ranking {
  font-weight: bold;
  color: #999;
  font-size: 16.5px;
  font-style: italic;
}

.first-image {
  height: 140px;
  width: 125px;
}

.box-office-first {
  border: #EFEFEF 1px solid;
  height: 118px;
  width: 210px;
  padding: 10px 0 10px 20px;
}

.ranking-top-icon {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 25px;
  background: url();
  background-size: contain;
}

.ranking-index {
  padding-left: 4px;
  width: 16px;
  line-height: 20px;
  color: #fff;
  background-color: #ffb400;
  position: absolute;
  z-index: 2;
}

.indexImage {
  position: absolute;
  z-index: 1;
  width: 165px;
  height: 140px;
}

.third {
  position: relative;
  left: 40px;
}

.description {
  position: relative;
  padding: 10px 0;
  border: 1px solid #EFEFEF;
  top: 140px;
  width: 163.5px;
}

.divider {
  margin-top: 160px;
}
</style>
